<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #mapui {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .overlay {
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .overlay button {
            font: 600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            background-color: #3386c0;
            color: #fff;
            display: inline-block;
            margin: 0;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }

        .overlay button:hover {
            background-color: #4ea0da;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>
    <div class="overlay">
        <button id="replay">重放</button>
    </div>
    <div class="overlay" style=" left: 105px;">
        <button id="pause">暂停</button>
    </div>
    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script src="./js_thematic_map_example/script/turf/turf.min.js"></script>
    <script src="./js_thematic_map_example/script/include-mapboxgl.js"></script>

    <script>

        var amap = null;
        var that = this;
        var animateId = null;
        // 添加航线数据
        var origin = [-122.414, 37.776];

        var destination = [-77.032, 38.913];

        var route = {
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': [origin, destination]
                    }
                }
            ]
        };

        // 沿着航线添加一个移动的点， 这个点从起始点运动到终点。
        var point = {
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'Point',
                        'coordinates': origin
                    }
                }
            ]
        };

        // 借助 Turf.js 来计算路线起点/终点之间的距离，单位为公里。
        var lineDistance = turf.distance(turf.point(origin), turf.point(destination), { units: 'kilometers' });


        var arc = [];

        // 接着， 在两点的 "原点 "和 "终点 "之间画一条弧线。
        // 并且写明这个点沿着弧线运动的步数 500。步数 （Steps）越多表示越好， 可以显示更平滑的动画效果，但步数太多也会造成低帧率。
        var steps = 500;

        for (var i = 0; i < lineDistance; i += lineDistance / steps) {
            var segment = turf.along(route.features[0], i, { units: 'kilometers' });
            arc.push(segment.geometry.coordinates);
        }

        // 我们还要更新点的移动坐标， 用上面计算出的圆弧坐标。
        route.features[0].geometry.coordinates = arc;

        var counter = 0;


        // 确定底图
        map.Factory.create('mapui', {
            center: [-96, 37.8],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 3,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
            style: style,
        }, (o) => {
            amap = o;

            amap.pmap.addSource('route', {
                'type': 'geojson',
                'data': route
            });

            amap.pmap.addSource('point', {
                'type': 'geojson',
                'data': point
            });

            amap.pmap.loadImage('./js_thematic_map_example/images/redCar.png', function (error, image) {
                if (error) throw error;
                amap.pmap.addImage('car', image);
            });

            // 在 addLayer 这里，选择合适的线样式，图标样式， 把航线及飞行动画效果最终呈现在地图上。 
            // 我设置了3条重叠的但样式不一样的 Line 来创造发光的航线！
            amap.pmap.addLayer({
                'id': 'route',
                'source': 'route',
                'type': 'line',
                'paint': {
                    'line-width': 6,
                    'line-blur': 3,
                    'line-opacity': 0.4,

                    'line-color': '#007cbf'
                }
            });

            amap.pmap.addLayer({
                'id': 'route2',
                'source': 'route',
                'type': 'line',
                'paint': {
                    'line-width': 3,
                    'line-blur': 3,
                    'line-opacity': 0.4,

                    'line-color': '#009df2'
                }
            });

            amap.pmap.addLayer({
                'id': 'route3',
                'source': 'route',
                'type': 'line',
                'paint': {
                    'line-width': 0.2,
                    'line-blur': 1,
                    'line-opacity': 1,

                    'line-color': '#fafdff'
                }
            });

            // 还要在地图上添加飞行动画！我直接用了 Mapbox 自带的 Icon—airport-15。
            amap.pmap.addLayer({
                'id': 'point',
                'source': 'point',
                'type': 'symbol',
                'layout': {
                    'icon-image': 'car',
                    'icon-rotate': ['get', 'bearing'],
                    'icon-rotation-alignment': 'map',
                    'icon-allow-overlap': true,
                    'icon-ignore-placement': true
                }
            });

            // 执行 animate 函数
            that.animate();

            // 重置按钮添加事件
            document.getElementById('replay').addEventListener('click', function () {
                document.getElementById("pause").disabled = false;

                if (animateId) {
                    cancelAnimationFrame(animateId)
                }
                counter = 0;
                // 执行 animate 函数
                that.animate();
            });

            // 暂停按钮添加事件
            document.getElementById('pause').addEventListener('click', function () {
                var value = document.getElementById('pause').innerText
                if (value == '暂停') {
                    if (animateId) {
                        document.getElementById('pause').innerText = '恢复'
                        cancelAnimationFrame(animateId)
                    }
                } else if (value == '恢复') {
                    document.getElementById('pause').innerText = '暂停'

                    requestAnimationFrame(animate);
                }
            });
        });


        // animate 函数
        function animate() {

            // 基于计数器表示的点几何更新到新的位置访问弧的索引。
            point.features[0].geometry.coordinates =
                route.features[0].geometry.coordinates[counter];

            //计算方向角，以确保图标旋转以匹配路线圆弧
            //在当前点和下一点之间计算方向角，除了
            //在弧的末端使用上一个点和当前点
            point.features[0].properties.bearing = turf.bearing(
                turf.point(
                    route.features[0].geometry.coordinates[
                    counter >= steps ? counter - 1 : counter
                    ]
                ),
                turf.point(
                    route.features[0].geometry.coordinates[
                    counter >= steps ? counter : counter + 1
                    ]
                )
            );

            // 更新点位置
            amap.pmap.getSource('point').setData(point);

            if (counter < steps) {
                animateId = requestAnimationFrame(animate);
            } else {
                document.getElementById("pause").disabled = true;
            }

            counter = counter + 1;
        }
    </script>
</body>

</html>